<template>
	<globalModal :title="title" :visible="visible" :confirmLoading="confirmLoading" :footer="null" @cancel="handleCancel">
		<a-spin :spinning="confirmLoading">
			<div style="margin:0 auto; height:200px;overflow: auto;">
				<div class="user-item " v-for="(item, index) in classList" :key="index">
					<div>
						<div class="flex flex-pack-justify">
							<span class="flex-1">班级：{{ item.className }}</span>
							<span class="flex-1">接收器：{{ item.machId }}</span>
						</div>
						<a-progress :percent="item.percent" />
					</div>
				</div>
			</div>
		</a-spin>
	</globalModal>
</template>

<script>
import { sysManageapi } from '@/api/index.js';
import { ModalMixins } from '@/mixins';
import { mapState, mapActions ,mapMutations} from 'vuex';
export default {
	name: 'uploadModal',
	mixins: [ModalMixins],
	data() {
		return {
			indeterminate: false,
			checkAllClass: false,
			classList: [],
			deptId: '',
			onlineClassNum: 0,
			iotVersionsList: []
		};
	},
	computed: {
		...mapState({
			user: state => state.user
		}),
		updateProg() {
			return this.$store.getters.onEvent('prog');
		}
	},
	watch: {
		updateProg: {
			handler(newValue, oldValue) {
				//更新
				this.classList.forEach(item => {
					if (item.machId == newValue.machId) {
						item.percent = newValue.val;
					}
				});
			},
			immediate: true, //初始化时让handler调用一下
			deep: true // 开启深度监听
		}
	},
	components: {},
	created() {},
	methods: {
		...mapMutations(['WEBSOCKET_INIT', 'SET_deviceType', 'WEBSOCKET_CLOSE']),
		initInfo(record = {}) {
			this.mdl = Object.assign({}, record);
			this.title = '设备升级进度';
			this.visible = true;
			//获取一些初始下拉数据
			this.getDefaultList && this.getDefaultList();
			this.SET_deviceType('');
			this.WEBSOCKET_INIT(this.wsUrl + this.user.userinfo.userId);
		},
		async getDefaultList() {
			this.deptId = this.mdl.deptId || '';
			this.getAllClass();
		},
		//获取班级
		getAllClass() {
			let param = {
				pageNum: 1,
				pageSize: 9999,
				orgId: this.globalOrgId,
				deptId: this.deptId
			};
			this.$postAction(sysManageapi.upgradeUrl.getClassVersion, param).then(res => {
				if (res.code == 1) {
					this.classList = res.data
						.filter(item => this.mdl.machIds.includes(item.machId))
						.map(item => {
							item.percent = 0;
							return item;
						});
				}
			});
		},

		handleCancel() {
			this.WEBSOCKET_CLOSE();
			this.confirmLoading = false;
			this.$emit('close');
			this.visible = false;
			
		}
	}
};
</script>

<style scoped lang="less">
.avatar-uploader-row {
	display: flex;
	align-items: center;
}

.avatar-uploader {
	width: 100px;
	height: 100px;
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 100%;
	line-height: 1;
	cursor: pointer;
	overflow: hidden;

	i {
		font-size: 32px;
		color: #999;
	}

	.ant-upload-text {
		margin-top: 8px;
		color: #999;
	}

	img {
		width: 100%;
		height: 100%;
	}
}

/deep/ .ant-checkbox-group {
	margin: 0 -4px;
}

/deep/ .ant-checkbox-wrapper {
	margin: 0 4px;
}

/deep/ .user-item {
	border: 1px dashed #d9d9d9;
	padding: 10px;
	border-radius: 4px;
	position: relative;
	margin: 10px 0 0;
	.ant-checkbox-wrapper {
		display: flex;
		align-items: center;
	}
}

.ant-upload-preview {
	position: relative;
	width: 100%;
	max-width: 120px;
	height: 120px;
	border-radius: 8px;
	overflow: hidden;

	.mask {
		opacity: 0;
		position: absolute;
		background: rgba(0, 0, 0, 0.3);
		cursor: pointer;
		transition: opacity 0.4s;

		&.active {
			opacity: 1 !important;
		}

		&:hover {
			opacity: 1;
		}

		i {
			font-size: 2rem;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -1rem;
			margin-top: -1rem;
			color: #d6d6d6;
		}
	}

	img,
	.mask {
		width: 100%;
		max-width: 180px;
		height: 100%;
		overflow: hidden;
	}

	.upload-img {
		font-size: 80px;
		text-align: center;
	}
}
</style>
